【書評】『Web配信の技術』を読んでウェブパフォーマンス・チューニングに再入門してみた
前職時代にはWebサイトの高速化をガッツリやっていました。 Webアクセラレーターの Varnish がコア技術だったため、Varnishの第一人者であるいわなちゃん(@xcir)のドキュメントでたくさん勉強させてもらいました。
そのいわなちゃんがこれまでのWeb配信の知見をまとめた『Web配信の技術』という本を紹介します。
副題が「HTTPキャッシュ・リバースプロキシ・CDNを活用する」とあるように、本書はこれらレイヤーでWeb配信を最適化する方法を丁寧に解説しています。
本書の構成
目次を見てみましょう。
- 第1章 はじめに
- 第2章 配信の基礎
- 第3章 HTTPヘッダ・設定とコンテンツの見直し
- 第4章 キャッシュによる負荷対策
- 第5章 より効果的・大規模な配信とキャッシュ
- 第6章 CDNを活用する
- 第7章 自作CDN(DIY‐CDN)
A5判で456ページとかなりのボリュームで、先頭から隈なく読むと、途中で挫折するかもしれません。 初読の場合、第2章〜第4章、第6章を重点的に読むと良いかもしれません。
第2章では、ウェブ配信の構成技術を少し低レイヤーな視点から学びます。 普段フロントエンドよりの仕事をしていると、あまり意識することのない領域かもしれません。 あとに続く章で根幹となる考え方が提示されているため、丁寧に読みましょう。
第3章では、ウェブ開発者もおなじみのHTTPプロトコル、コンテンツ圧縮、更には画像の最適化配信を学びます。 完全に理解しているつもりのHTTPプロトコルも、RFCを参照した厳密な解説を読むことで、何もわかっていなかったと気付けるでしょう。
RFC を参照しているからと言って、頭でっかちなわけでは有りません。 長年の経験を元に、現場で活用するための具体的な配慮にあふれています。
第4章では、具体的なキャッシュ方法を学びます。
HTTPレスポンスヘッダーに Cache-Control: no-cache
を返せば、ブラウザはキャッシュを保存しないはずと、雰囲気でキャッシュ設定していないでしょうか?
キャシュは設定次第によって、配信を効率化することもあれば、重大な事故につながることもあります。 どのコンポーネントでキャッシュ可能なのか、各キャッシュの正しい設定方法やメリット・デメリットを理解しましょう。
第6章ではCDNのキャッシュ方法を学びます。
CDNを導入すればすべてが解決するわけではありません。 CDNを活用するには、要件にあったCDNを選択し、注意深く設定し、導入後も監視・運用し続ける必要があります。
CDN(Amazon CloudFront) は高く無いよ!
本書では、CDNの仮の課金として 10円/GB という単価が登場します。
日本エリアで Amazon CloudFront を利用した場合の単価を確認してみましょう。
日本エリアの場合、アウトバウントの単価は $0.114/GB、仮に$1=\110 なら 12.54円/GB です。
先月登場した CloudFront Security Savings Bundle を利用して1年契約をすると、料金を最大30%節約できます。
弊社クラスメソッドの「EC2・CDN割引プラン」を利用すると、年契約不要の従量課金にもかかわらず、単価は $0.051/GB と約55%節約できます。$1=\110 で円換算すれば、 5.61円/GB です。10円/GB より随分安くなりました。
AWS から配信しているにもかかわらず、CloudFront を利用していないのは価格・性能・セキュリティ、様々な面でもったいないので、ぜひ Amazon CloudFront の利用をご検討ください。
メディア配信を最適化したいなら Cloudinary がおすすめ
「3.15節 適切なメディアの選択によるコンテンツの改善」で書かれているように、配信コンテンツで多くのファイルサイズを占めるのは、画像・動画・音声といったメディア系コンテンツです。 これらコンテンツのファイルサイズを圧縮すると、Web配信を大幅に最適化できます。
例えば画像配信の場合、JPEG・WebPといった適切な画像フォーマットの選択、画像の圧縮を各種ブラウザ向けに最適化する必要があります。
例えば、本書の出版社の書籍ページでは、表紙の画像 URL は http://image.gihyo.co.jp/assets/images/cover/2021/9784297119256.jpg です。
cURL のデフォルトオプションでリクエストすると、155KB の JPEG 画像が返却され、Chrome ブラウザでリクエストする時のように Accept-Encoding
に webp を渡してリクエストすると、ファイルサイズが 77KB と約半分の WebP 画像が返却されます。
つまり、画像配信が最適化されていることがわかります。
$ URL=http://image.gihyo.co.jp/assets/images/cover/2021/9784297119256.jpg $ curl -D - -o /dev/null $URL --silent HTTP/1.1 200 OK Server: nginx Date: Thu, 25 Mar 2021 15:20:43 GMT Content-Type: image/jpeg Content-Length: 154599 Last-Modified: Fri, 29 Jan 2021 17:30:09 GMT Connection: keep-alive ETag: "60144621-25be7" Expires: Sat, 24 Apr 2021 15:20:43 GMT Cache-Control: max-age=2592000 Access-Control-Allow-Origin: * X-Content-Type-Options: nosniff Cache-Control: public Accept-Ranges: bytes $ curl -D - -o /dev/null \ -H 'accept: image/webp,image/*' \ $URL --silent HTTP/1.1 200 OK Server: nginx Date: Thu, 25 Mar 2021 15:21:53 GMT Content-Type: image/webp Content-Length: 76634 ...
このような画像最適化システムを実装し、Webシステムと連携して運用するのはかなり骨が折れます。
Cloudinary のようなSaaSを利用することで、メディア配信の最適化をオフロードできます。
弊社は Cloudinary の正規代理店のため、画像・動画配信の最適化をこれからやってみたいお客様から、既存システムからの切り替えまで、幅広くご支援いたしますので、お気軽にお相談ください。
まとめ
本書を読めば、オリジンサーバー、エッジ(CDN)、ブラウザを横断した効率的なWebコンテンツ配信を一気通貫に学べます。
Webコンテンツ配信の最適化は一見すると地味ですが、奥が深く、改善インパクトも大きいです。 本書を読めば、つい後回しになりがちなWeb配信の最適化をプロアクティブに取り組めるようになるでしょう。
- 雰囲気でWebパフォーマンスチューニングをやってきた人
- web.dev や Mozilla Developer Network(MDN) のつまみ食いから脱して体系的にWeb技術を学びたい人
- 『Real World HTTP』や『ハイパフォーマンス ブラウザネットワーキング』といったジャンルの本が好きな人
におすすめしたい一冊です。